﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout2.cshtml";
}

@section styles {
    <style>
       #container 
       {
           width:200px;
           height:200px;
           position:relative;   
       }
       
       #container ul 
       {
          list-style:none;    
       }
       
       #container ul li
       {
           float:left;
           margin-left:5px;
           bottom:0;
           background-color:Black;
           display:block;
           position:absolute
       }
       
       
    </style>
}

<section>
   <div id="container"> 
      <ul></ul>
   </div>
</section>
<section>
   @*<a href='javascript:void(0);' id='btnVote'>VOTE</a>*@
</section>

@section scripts {
<script>
    $(document).ready(function () {

        var resource;
        init();

        function init() {
            var allWidth = 200;
            var allHeight = 100;
            var _len, _width, _max, _rate;

            $.getJSON('Content/data/vote.json', function (res) {
                if (!resource) {
                    resource = res.data;
                }
                _len = resource.length;
                _width = Math.floor(allWidth / _len) - 5;
                _max = _.max(resource, function (o) { return o.Ticket; }).Ticket;
                _rate = (allHeight * 0.8) / _max;
                for (var i = 0; i < resource.length; i++) {
                    var obj = resource[i];
                    var _li = $('<li/>').css('height', (obj.Ticket * _rate) + "px")
                    .css('left', (i + 1) * (_width + 5) + "px")
                    .css('width', _width + "px");

                    var _input = $('<input type="radio"/>').css('bottom', "-20px")
                    .css('position', 'absolute')
                    .css('left', ((i + 1) * (_width + 5) + Math.floor(_width / 2) - 5) + "px")
                    .attr('name', 'vote')
                    .attr('value', obj.Id);
                    $('#container ul').append(_li).append(_input);
                }


            });
        }

        $('#btnVote').click(function () {
            var _id = $(this).val();
            var obj = _.find(resourse, function (o) { return o.Id == _id; });
            obj.Ticket = obj.Ticket + 1;

        });

    });
</script>
}
